<template>
  <InputSelectWrapper>
    <div class="select-wrapper">
      <a-select :value="value" @change="onSelect" :open="isOptionsShow">
        <slot></slot>
      </a-select>
    </div>
    <a-input :value="value" @input="onInput" @click.stop>
      <a-icon slot="addonAfter" :type="isOptionsShow ? 'up' : 'down'" class="btn-select" style="font-size: 12px; color: rgba(0, 0, 0, 0.25);" @click="handleSelect"></a-icon>
    </a-input>
  </InputSelectWrapper>
</template>

<script>
import { InputSelectWrapper } from './style'
export default {
  name: 'input-select',
  components: {
    InputSelectWrapper
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      isOptionsShow: false,
    }
  },
  methods: {
    onInput (e) {
      this.$emit('change', e.target.value)
      this.isOptionsShow = false
    },
    handleSelect () {
      this.isOptionsShow = !this.isOptionsShow
    },
    onSelect (val) {
      this.$emit('change', val)
      this.isOptionsShow = false
    },
  },
}
</script>
